/**
 * Created by imac13 on 19/1/8.
 */
import React,{ Component } from 'react';
import {Card,Table,Button,Form,Select,Modal,Radio,message} from 'antd';
import axios from './../../axios';
import Utils from './../../utils/utils';

const FormItem = Form.Item;
const Option = Select.Option;
export default class City extends Component {
    state={
        dataSource:[],
        isShowOpenCity:false
    };
    params = {
        page:1,
    };
    componentDidMount () {
        this.getRequest()
    }
    //表格调用接口
    getRequest = () => {
        let _this = this;
        let baseApi = 'https://www.easy-mock.com/mock/5a7278e28d0c633b9c4adbd7/api';
        axios.ajax({
            url:baseApi+'/open_city',
            data:{
                params:{
                    page:this.params.page
                }
            }
        }).then((res)=>{
            res.result.item_list.map((item,index)=>{
                item.key = index;
            });
            this.setState({
                dataSource:res.result.item_list,
                pagination:Utils.pagination(res,(current)=>{
                    _this.params.page = current;
                    _this.getTableList();
                })
            })
        })
    };
    //开通城市
    handleOpenCity = ()=> {
        this.setState({
            isShowOpenCity:true
        })
    };
    //城市开通提交
    handleSubmit = ()=> {
        let cityInfo = this.cityForm.props.form.getFieldsValue();
        console.log(cityInfo);
        let baseApi = 'https://www.easy-mock.com/mock/5a7278e28d0c633b9c4adbd7/api';
        axios.ajax({
            url:baseApi+'/city/open',
            data:{
                params:cityInfo
            }
        }).then((res)=>{
            if (res.code == 0){
                message.success('开通成功');
                this.setState({
                    isShowOpenCity:false
                })
                this.getRequest();
            }
        })
    };
    render(){
        const columns = [
            {
                title:'城市id',
                dataIndex:'id'
            },
            {
                title:'城市名称',
                dataIndex:'name'
            },
            {
                title:'用车模式',
                dataIndex:'mode',
                render(mode){
                    return mode == 1 ? '停车点' : '禁停区'
                }
            },
            {
                title:'营运模式',
                dataIndex:'op_mode',
                render(op_mode){
                    return op_mode == 1 ? '自营' : '加盟'
                }
            },
            // {
            //     title:'加盟商id',
            //     dataIndex:'franchisee_id'
            // },
            {
                title:'授权加盟商',
                dataIndex:'franchisee_name'
            },
            {
                title:'城市管理员',
                dataIndex:'city_admins',
                render(arr){
                    return arr.map((item)=>{
                        return item.user_name;
                    }).join(',')
                }
            },
            {
                title:'城市开通时间',
                dataIndex:'open_time'
            },
            {
                title:'操作时间',
                dataIndex:'update_time',
                render:Utils.formateDate
            },
            {
                title:'操作人',
                dataIndex:'sys_user_name'
            },
        ];
        return(
            <div>
                <Card>
                    <TopForm/>
                </Card>
                <Card style={{marginTop:10}}>
                    <Button type="primary" onClick={this.handleOpenCity}>开通城市</Button>
                </Card>
                <div className="content-wrap">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={this.state.pagination}
                    />
                </div>
                <Modal
                    title="开通城市"
                    visible={this.state.isShowOpenCity}
                    onOk={this.handleSubmit}
                    onCancel={()=>{
                        this.setState({
                            isShowOpenCity:false
                        })
                    }}
                >
                    <OpenCityForm wrappedComponentRef={(inst)=>this.cityForm = inst} />
                </Modal>
            </div>
        )
    }
}

class TopForm extends Component {
    render(){
        const {getFieldDecorator} = this.props.form;
        return(
            <Form layout="inline" >
                <FormItem label="城市">
                    {
                        getFieldDecorator('city_id')(
                            <Select style={{ width: 100,marginRight:20 }} placeholder="全部">
                                <Option value="">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                                <Option value="3">深圳市</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="用车模式">
                    {
                        getFieldDecorator('mode')(
                            <Select style={{ width: 120,margin:'0 20px' }} placeholder="全部">
                                <Option value="">全部</Option>
                                <Option value="1">指定停车点模式</Option>
                                <Option value="2">禁停区模式</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="营运模式">
                    {
                        getFieldDecorator('op_mode')(
                            <Select style={{ width: 80 ,margin:'0 20px'}} placeholder="全部">
                                <Option value="">全部</Option>
                                <Option value="1">自营</Option>
                                <Option value="2">加盟</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="加盟商授权状态">
                    {
                        getFieldDecorator('auth_status')(
                            <Select style={{ width: 100,margin:'0 20px' }} placeholder="全部">
                                <Option value="">全部</Option>
                                <Option value="1">已授权</Option>
                                <Option value="2">未授权</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem>
                    <Button type="primary" style={{ margin:'0 20px' }}>查询</Button>
                    <Button>重置</Button>
                </FormItem>
            </Form>
        );
    }
}
TopForm = Form.create({})(TopForm);

class OpenCityForm extends Component {
    render(){
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                 span: 4 ,
            },
            wrapperCol: {
                 span: 16 ,
            },
        };
        return(
          <Form layout="horizontal">
              <FormItem label="选择城市" {...formItemLayout}>
                  {
                      getFieldDecorator('city_id',{
                          initialValue:'1',
                      })(
                          <Select style={{width:120}}>
                              <Option value="">全部</Option>
                              <Option value="1">北京市</Option>
                              <Option value="2">天津市</Option>
                          </Select>
                      )
                  }
              </FormItem>
              <FormItem label="营运模式" {...formItemLayout}>
                  {
                      getFieldDecorator('op_mode',{
                          initialValue:'1',
                      })(
                          <Radio.Group>
                          <Radio value="1">自营</Radio>
                          <Radio value="2">加盟</Radio>
                          </Radio.Group>
                      )
                  }
              </FormItem>
              <FormItem label="用车模式" {...formItemLayout}>
                  {
                      getFieldDecorator('use_mode',{
                          initialValue:'1',
                      })(
                          <Radio.Group>
                              <Radio value="1">指定停车点模式</Radio>
                              <Radio value="2">禁停区模式</Radio>
                          </Radio.Group>
                      )
                  }
              </FormItem>
          </Form>
        )
    }
}
OpenCityForm = Form.create({})(OpenCityForm);